<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>实现列表的一起运动渐进过渡效果</title>  
  <script src="vue.js"></script>
</head>
<style>
  .list-move,.list-enter-active, .list-leave-active {
	  transition: 1s;
	}
  .list-leave-active{
	  position:absolute;
	}
  .list-enter,.list-leave-to{
	  opacity: 0;height:0;
	}
</style>
<body>
<div id="app" class="demo">
  <input v-model="query" placeholder="请输入要查找的内容">
  <transition-group name="list" tag="ul">
    <li v-for="(item, index) in computedList" :key="item" :data-index="index">{{ item }}</li>
  </transition-group>
</div>
<script>
var vm=new Vue({
    el: '#app',
    data: {
      query: '',
      list: ['HTML','CSS','Javascript','jQuery','Vue']
    },
    computed: {
      computedList() {
        return this.list.filter((item)=>{
          return item.toLowerCase().indexOf(this.query.toLowerCase()) !== -1
        })
      }
    },  
 })
</script>
</body>
</html>